import React, { useState, useEffect } from 'react';
import './index.css';
import IncomeStats from '../../components/promote/IncomeStats';
import PromotionLink from '../../components/promote/PromotionLink';
import FunctionButtons from '../../components/promote/FunctionButtons';
import IncomeRanking from '../../components/promote/IncomeRanking';
import PosterModal from '../../components/promote/PosterModal';
import CopyModal from '../../components/promote/CopyModal';
import ReportModal from '../../components/promote/ReportModal';
import { useSelector } from 'react-redux';

const Promotion = () => {

  const [promotionLink, setPromotionLink] = useState('');
  const [copySuccess, setCopySuccess] = useState('');

  // 弹窗状态
  const [showQrCodeModal, setShowQrCodeModal] = useState(false);
  const [showCopyModal, setShowCopyModal] = useState(false);
  const [showReportModal, setShowReportModal] = useState(false);

  const { userInfo } = useSelector((state) => state.login);
  const currentUserId = userInfo?.id || 'default_promoter_id'; // 增加默认值，避免为空

  useEffect(() => {
    if (currentUserId) {
      const generatedLink = `http://localhost:5173/register?ref=${currentUserId}`;
      setPromotionLink(generatedLink);
    }
  }, [currentUserId]);

  // 收益排行榜数据
  const incomeRankings = [
    { rank: 1, name: '鸭子', income: '¥12,580', orderCount: 186, incomeRate: '42.3%', avatar: 'https://picsum.photos/id/64/100/100' },
    { rank: 2, name: '粥', income: '¥12,580', orderCount: 186, incomeRate: '42.3%', avatar: 'https://picsum.photos/id/65/100/100' },
    { rank: 3, name: '葡萄', income: '¥10,230', orderCount: 150, incomeRate: '35.1%', avatar: 'https://picsum.photos/id/66/100/100' },
    { rank: 4, name: '张三', income: '¥8,950', orderCount: 130, incomeRate: '28.7%', avatar: 'https://picsum.photos/id/67/100/100' },
    { rank: 5, name: '李四', income: '¥7,620', orderCount: 110, incomeRate: '22.4%', avatar: 'https://picsum.photos/id/68/100/100' },
  ];

  return (
    <div className="promotion-page">
      {/* 收益统计 */}
      <IncomeStats
        totalIncome="¥86,520"
        totalIncomeRate="18.2%"
        monthIncome="¥24,580"
        monthIncomeRate="12.5%"
        toSettle="¥5,240"
      />

      {/* 推广链接 */}
      <PromotionLink
        link={promotionLink}
        onCopySuccess={() => setCopySuccess('推广链接复制成功！')}
      />

      {/* 功能按钮组 */}
      <FunctionButtons
        onCopyLink={() => {
          // 复制链接逻辑
          navigator.clipboard.writeText(promotionLink)
            .then(() => setCopySuccess('推广链接复制成功！'))
            .catch(err => console.error('复制失败:', err));
          setTimeout(() => setCopySuccess(''), 2000);
        }}
        onOpenReport={() => setShowReportModal(true)}
        onOpenCopyModal={() => setShowCopyModal(true)}
        onShowPoster={() => setShowQrCodeModal(true)}
      />

      {/* 收益排行榜 */}
      <IncomeRanking
        rankings={incomeRankings}
        updateTime="今天 14:30"
      />

      {/* 海报弹窗 */}
      <PosterModal
        visible={showQrCodeModal}
        link={promotionLink}
        onClose={() => setShowQrCodeModal(false)}
        onSaveSuccess={() => {
          setCopySuccess('海报保存成功！');
          setTimeout(() => setCopySuccess(''), 2000);
        }}
      />

      {/* 文案弹窗 */}
      <CopyModal
        visible={showCopyModal}
        link={promotionLink}
        onClose={() => setShowCopyModal(false)}
      />

      {/* 数据报表弹窗 */}
      <ReportModal
        visible={showReportModal}
        onClose={() => setShowReportModal(false)}
      />
    </div>
  );
};

export default Promotion;